var templat=`
     <div id="hedaerall">
            <div class="header-top">
                <div class="header-top-content">
                    <div class="headr-top-left">
                        <span class="heder-top-login" >hi，欢迎来到保险中介平台，<a href="javascript:;" style="color: #ffffff">请登录</a></span>
                        <span class="header-top-jiange">|</span>
                        <span class="hader-top-register"><a href="javascript:;" style="color: #FDEC8F">免费注册</a></span>
                        <span class="header-top-tel">
            <img src="../images/header-tel@2x.png" alt="电话">
            <span>客服热线：010-65889635</span></span>
                    </div>
                    <ul class="headr-top-right">
                        <li class="top-right-item-li"><span>帮助中心</span><span class="header-jiange">|</span></li>
                        <li class="top-right-item-li"><span>保险攻略</span><span class="header-jiange">|</span></li>
                        <li class="top-right-item-li" style="position: relative">
                            <span id="webHttp">网址导航 <span class="header-jiange">|</span></span>
                            <ul class="website-nav" id="website-nav-box">
                                <li class="website-nav-item-li"><a href="" >首页的</a></li>
                                <li class="website-nav-item-li"><a href="" >首页多发</a></li>
                            </ul>
                        </li>
                        <li class="header-top-love top-right-item-li">
                            <img src="../images/header-icon-heart-full@2x.png" alt="收藏">
                            <span>收藏本站</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="heder-bottom">
                <div class="header-bottom-content">
                    <div class="hader-bottom-logo">
                        <a href="javascript:;" class="logo-img-a">阳光三泰</a>
                    </div>
                    <div class="hader-bottom-nav">
                        <ul class="heder-large-menu" id="largeMenu">
                            <li class="heder-large-menu-item "><a href="javascript:;" class="menu-a-link heder-large-menu-active">首页</a></li>
                            <li class="heder-large-menu-item"><a href="javascript:;" class="menu-a-link">产品中心</a></li>
                            <li class="heder-large-menu-item"><a href="javascript:;" class="menu-a-link">保险公司</a></li>
                            <li class="heder-large-menu-item " >
                                <a href="" class="menu-a-link">服务中心</a>
                                <i class="icon-down"></i>
                                <ul class="header-smal-menu" >
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">保单查询</a></li>
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">投保问题</a></li>
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">问题反馈</a></li>
                                </ul>
                            </li>
                            <li class="heder-large-menu-item">
                                <a href="" class="menu-a-link">个人中心</a>
                                <i class="icon-down"></i>
                                <ul class="header-smal-menu" >
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">我的订单</a></li>
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">消息中心</a></li>
                                    <li class="smal-item-menu"><a href="javascript:;" class="smal-item-link">修改密码</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="hader-bottom-search">
                        <div class="header-search-content">
                            <input type="text" placeholder="请输入您想查询的保险产品" class="header-search-text">
                        </div>
                        <span class="header-search-button" @click="goToUrl('搜索')">搜索</span>

                    </div>
                </div>
            </div>
        </div>
`

Vue.component('headrtest', {
    template: templat,
    props: {
        activeIndex: {
            type: String,
            default: '1'
        }
    },
    data: function () {
        return {
            defaultClass:"menu-a-link",
            activeClass1:'heder-large-menu-active',
            activeClass2:'',
            activeClass3:'',
            activeClass4:'',
            activeClass5:'',
            activeClass6:'',
            loginFlag:true,//默认未登陆
            logintext:'hi，欢迎来到保险中介平台,',
            loginOrOut:'请登陆',
        }
    },
    created: function () {
        this.isLogin()
    },
    mounted: function () {

    },
    methods: {
        activeNav:function(index){
            this
        },
        isLogin:function(){
            //判断有没有登陆
            if(!this.loginFlag){
                this.logintext="hi，欢迎来到保险中介平台，"
                this.loginOrOut="请登陆"
            }else{
                this.logintext="李四你好，欢迎回来";
                this.loginOrOut="退出";
            }

        },
        goToLogin:function(){
            //根据不同的环境跳转到不同的环境的登陆页面
            alert('跳转登陆')
        },
        loginOrOut:function(){
            if(this.loginFlag){
                //没有登陆跳转到登陆注册页面
            }else{
                //已经登陆  退出
            }
        },
        goToUrl:function (val) {},
        handleSelect:function (val) {},

    }
})
